import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { Navigate, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
import "./HerosCon.css"
export default function HerosCon() {

    let navigate=useNavigate()

    //接受url 地址 params 参数
    // let {id}=useParams();

    // let [search,setSearch]=useSearchParams()    // 返回一个数组
    // console.log(search.get('id'));
    // let id=search.get('id');

    // 接受 路由  state传递的数据
    let location=useLocation();
    let {id}=location.state;

    //配置英雄id
    // let id = 19;
    // 创建状态
    let [herocon,setHerocon]= useState({});

    // 模拟生命周期  componentDidMount
    useEffect(()=>{
        async function main(){
            let {data} = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
            console.log(data);
            setHerocon(data);
        }
        main();
    },[]);


    //回退
    let prev=()=>{
        navigate(-1);//回退到上一页
    }

    //回到首页
    let home=()=>{
        navigate('/home',{
            replace:true,   // push    replace   场景:登录 注册  404作用是不会再跳转回上一页
            state:{
                id:1,
                name:'132'
            }
        })
    }


  return (
    <div className="heros-con">
        <div className="heros-left">
            <button onClick={prev}>后退</button>
            <button onClick={home}>回到首页</button>
            <img src={`https://cdn.xiaohigh.com${herocon.image}`} alt="" />
            <h2>{herocon.name}</h2>
            <h3>{herocon.type}</h3>
            <div className="img-min">
                <ul>
                    {
                         herocon.skills && herocon.skills.map((item,index)=>{
                            return <li key={index}>
                                        <img src={`https://cdn.xiaohigh.com${item.img}`} alt="" />
                                        <h4>{item.name}</h4>
                                    </li>
                        })
                    }
                    
                    
                </ul>
            </div>
        </div>
        <div className="heros-right">
            <img src={`https://cdn.xiaohigh.com${herocon.big_image}`} alt="" />
            <hr />
            <p dangerouslySetInnerHTML={{__html:herocon.intro}}></p>
                
        </div>
    </div>
  )
}
